<style>
	.searchBut {
		display: flex;
		align-items: center;
		padding-left: 9px;
		position: absolute;
		right: 10px;
		top: 0px;
		cursor: pointer;
	}

	.searchBut-block {
		position: absolute;
		right: 65px;
		top: 8px;
		display: inline-block;
		height: 18px;
		width: 1px;
		background: #F2F2F2;
	}

	.cmNameList {
		position: absolute;
		z-index: 99;
		top: 35px;
		width: 100%;
		background: #fff;
		max-height: 170px;
		overflow-y: auto;
		cursor: pointer;
	}

	.createCm h3 {
		margin: 0 !important;
		font-weight: bold;
		color: #999;
	}

	.cm-container {
		margin: 20px 0;
	}

	.cm-commercial-logo {
		width: 140px;
	}

	.cm-commercial-logo img {
		width: 138px;
		height: 138px;
		border: 1px solid #ddd;
		display: block;
	}

	.cm-commercial-wrap {
		width: 685px;
		margin-left: 50px;
	}

	.cm-indent {
		text-indent: 3em;
	}

	.box-cm-active {
		box-shadow: 0px 0px 4px 0px rgba(238, 49, 49, 1) inset !important;
	}

	.cm-commercial {
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		border-radius: 4px;
		padding-left: 8px;
		padding-right: 8px;
		margin-bottom: 20px;
	}

	.validata-customer {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.validata-control {
		width: 400px;
		border-radius: 4px;
		background-color: #fff;
		text-align: center;
		overflow: hidden;
		position: relative;
	}

	.validata-control .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		height: 40px;
		line-height: 40px;
	}

	.validata-control h3 {
		font-size: 16px;
		line-height: 45px;
		color: #565e99;
		font-weight: bold;
	}

	.validata-control p {
		padding: 40px 0 53px;
	}

	.blue-button {
		background-color: #565e99;
		color: #fff;
		line-height: 50px;
	}

	.gray-button {
		background-color: #f2f2f2;
		line-height: 50px;
		color: #666
	}

	.cmNameList li {
		padding-left: 12px
	}

	.custom_container>div {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-right: 20px;
	}

	.custom_title {
		padding-left: 8px;
		width: 105px;
		position: relative;
	}

	.custom_title>span {
		position: absolute;
		left: 0px;
	}

	.hl-checkbox-container ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap
	}

	.hl-checkbox-container .item {
		margin-bottom: 0
	}

	.alignItems {
		align-items: flex-start !important;
	}


	.hl-radio-container li {
		margin-bottom: 10px;
	}

	.custom_container {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
</style>

<section id="createCm" class="createCm mlr-24" @click="inputChange">
	<hl-page-header title="新增客户" title-color="#999"></hl-page-header>
	<div class="cm-container">

		<div class="cm-wrap pb-10" style="marginRight: 80px;">
			<div class="cm-title color-gray">主要信息</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span class="required">*</span>客户名称:</div>
				<div class="dy-fx-4 relative cmNameListArea">
					<input type="text" class="form-control" v-model="cmName" @input="getcmNameList"
						style="padding-right:70px" />
					<span class="searchBut-block"></span>
					<span class="searchBut" @click.stop="show" ref="search"><span class="icon-Gm-search "></span><span
							style="margin-left:5px">搜索</span></span>
					<ul class="cmNameList" v-if="showcmNameList && cmName">
						<li v-for="(item,index) in cmNameList" @click="selectcmName(item.companyName)">
							{{item.companyName}}</li>
					</ul>
				</div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>简称:</div>
				<div class="dy-fx-4"><input type="text" class="form-control" v-model="jcName" /></div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span class="required">*</span>客户状态:</div>
				<div class="dy-fx-4">
					<hl-select :width="236" :data="customerStateData" v-model="selectedCustomerState" type="primary" @on-change="selectedCustomerStateChange">
					</hl-select>
				</div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"><span class="required">*</span>客户类型:</div>
				<div class="dy-fx-4">
					<ul class="cr-type-select clearfix">
						<li v-for="item in type" :class="{active: item.type == typeAct}" @click="typeAct = item.type">
							{{item.name}}</li>
					</ul>
				</div>
			</div>
			<div class="dy-flex pt-10 line-height-34" v-if="selectedCustomerState[0]=='LS'">
				<div class="dy-fx-2 color-666"><span style="color:red;" v-if="selectedCustomerState[0]=='LS'">*</span>流失原因:</div>
				<div class="dy-fx-4">
					<hl-select :width="236" :data="lsListData" v-model="lsSelectData" type="primary">
					</hl-select>
				</div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"></div>
				<div class="dy-fx-4"></div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>所属行业:</div>
				<div class="dy-fx-4">
					<hl-select :width="236" :data="industryData" v-model="selectedIndustry" type="primary"></hl-select>
				</div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>过程管理:</div>
				<div class="dy-fx-4">
					<hl-select :width="236" :data="processData" v-model="selectedProcess" type="primary"></hl-select>
				</div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666">
					<span style="color:white;">*</span>{{typeAct == 'QY' ? '纳税人识别号' : '身份证号'}}:
				</div>
				<div class="dy-fx-4"><input type="text" class="form-control" v-model="idcode" /></div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>邮箱:</div>
				<div class="dy-fx-4"><input type="text" class="form-control" v-model="email" /></div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span class="required">*</span>联系人:</div>
				<div class="dy-fx-4 clearfix">
					<input type="text" class="form-control pull-left mr-10" style="width:78px;" v-model="lperson"
						:class="{'box-cm-active':lspeopleflag}" />
					<input type="text" class="form-control pull-left" style="width:145px;" placeholder="联系电话"
						v-model="phone" :class="{'box-cm-active':lsphoneflag}" />
				</div>
				<div class="dy-fx-3"></div>
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>邮编:</div>
				<div class="dy-fx-4"><input type="text" class="form-control" style="width:170px;" v-model="zipcode" />
				</div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>通讯地址:</div>
				<div class="dy-fx-13"><input type="text" class="form-control" v-model="address" /></div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span class="required">*</span>渠道分类:</div>
				<div class="dy-fx-13 clearfix">
					<hl-select class="pull-left" :width="180" :data="channelTypeData" v-model="selectedChannelType"
						type="primary" @on-change="handleChannelTypeChange"></hl-select>
					<div class="pull-left" style="marginLeft: 50px; marginRight:20px;"><span
							style="color:#fff;">*</span>渠道名称:</div>
					<hl-select class="pull-left" :width="180" :data="channelNameData" v-model="selectedChannelName"
						type="primary" @on-change="handleChannelNameChange"></hl-select>

					<div class="pull-left" style="marginLeft: 50px;"><span class="required">*</span>是否黑名单:</div>
					<div class="pull-left ml-24">
						<ul class="cr-type-select clearfix">
							<li v-for="item in blacklist" :class="{active: item.type == blacklistAct}"
								@click="blacklistAct = item.type">{{item.name}}</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="dy-flex pt-10 line-height-34">
				<div class="dy-fx-2 color-666"><span style="color:white;">*</span>客户备注:</div>
				<div class="dy-fx-13"><textarea class="form-control" rows="5" v-model="memo"></textarea></div>
			</div>
		</div>

		<!-- 自定义 -->
		<hl-custom-fileds type="CUSTOMER" v-model="resData"></hl-custom-fileds>

		<div class="clearfix mb-10">
			<div class="pull-left color-gray" style="marginLeft:6px;">工商信息</div>
			<div class="pull-right cursor" style="color:#337AB7;marginRight: 55px;" @click="getcompanyDetail">同步工商数据
			</div>
		</div>
		<div class="cm-commercial ptb-10" style="marginRight: 20px;">
			<div class="clearfix" style="padding:20px;">
				<div class="pull-left cm-commercial-logo">
					<img src="http://dev.fenzhitech.com/res/8e694146ea6e7ed53310514f7324942e.jpg" />
					<p class="pt-10"></p>
				</div>
				<div class="pull-left cm-commercial-wrap">
					<div class="dy-flex line-height-34">
						<div class="dy-fx-3">工商注册号:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.bizRegisterCode" /></div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-3 cm-indent">经营状态:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.operateStatus" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">统一社会信用代码:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.socialUnifiedCreditCode" /></div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-3 cm-indent">登记机关:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.registerAgency" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">组织机构代码:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.bizOrganizationCode" /></div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-3 cm-indent">公司类型:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.bizCompanyType" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">法人名:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.bizLegalPersonName" /></div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-3 cm-indent">成立日期:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.establishTime" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">注册资金:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.registerCapital" /></div>
						<div class="dy-fx-1"></div>
						<div class="dy-fx-3 cm-indent">营业结束日期:</div>
						<div class="dy-fx-3"><input type="text" class="form-control"
								v-model="IndustryDetail.operationEndTime" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">注册地址:</div>
						<div class="dy-fx-10"><input type="text" class="form-control"
								v-model="IndustryDetail.registerAddr" /></div>
					</div>
					<div class="dy-flex line-height-34 pt-10">
						<div class="dy-fx-3">经营范围:</div>
						<div class="dy-fx-10"><textarea class="form-control" rows="4"
								v-model="IndustryDetail.operationScope"></textarea></div>
					</div>
				</div>
			</div>
		</div>

		<div class="clearfix">
			<hl-button type="primary" @on-click="validataCustomer">保存</hl-button>
			<hl-button type="outline">返回</hl-button>
		</div>
	</div>

	<!-- //验证客户 -->
	<div class="validata-customer" v-if="validataflag">
		<div class="validata-control">
			<div class="close cursor" @click="hidePopValidata">x</div>
			<h3>重复客户</h3>
			<p>存在其他相同客户，确认继续保存此客户</p>
			<div class="dy-flex">
				<div class="dy-fx-1 blue-button cursor" @click="postCm">确认</div>
				<div class="dy-fx-1 gray-button cursor" @click="hidePopValidata">取消</div>
			</div>
		</div>
	</div>
</section>

<script src="modules/rent/scripts/createCm.js" charset="utf-8"></script>
